<template>
    <div class="banding">
        <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <van-icon name="edit" slot="right" />
        </van-nav-bar>
        
        
        <van-cell-group>
            <van-field
                v-model="form.mobile"
                ref="mobile"
                clearable
                label="手机号"
                placeholder="请输入手机号"
            />
            <van-field
                v-model="form.smsCode"
                center
                clearable
                label="手机验证码"
                placeholder="请输入验证码"
            >
                <van-button slot="button" size="small" type="primary" :disabled="canGetSMSValidCode" :text="codeText" @click="getSMSValidCodeHandler"></van-button>
            </van-field>
        </van-cell-group>


        <van-row type="flex" justify="center">
            <van-col span="22" style="margin-top: 20px;">
                <van-button type="primary" style="width: 100%;" @click="checkSMSValidCodeHandler">完成绑定</van-button>
            </van-col>
        </van-row>
        

    </div>
</template>

<script>
    import { NavBar, Row, Col, Icon, CellGroup, Cell, Toast, Tabs, Tab, Field, Button } from 'vant'
    import { getSMSValidCode, checkSMSValidCode, bandingMobile } from '@/api/user/'
    import { validateMobile, validateNull } from '@/utils'
    import { setStore, getStore } from '@/utils/store'

    export default {
        name: 'Banding',
        components: {
            [NavBar.name]: NavBar,
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [CellGroup.name]: CellGroup,
            [Cell.name]: Cell,
            [Toast.name]: Toast,
            [Tabs.name]: Tabs,
            [Tab.name]: Tab,
            [Field.name]: Field,
            [Button.name]: Button,
        },
        created() {
            this.title = this.$router.currentRoute.name
            
            
        },
        data() {
            return {
                /**
                 * 接受参数
                 * openid
                 */
                params: this.$route.query,
                title: null,
                form: {
                    mobile: '15602208451',
                    smsCode: null
                },
                canGetSMSValidCode: false,
                codeText: '获取验证码'
            }
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onClickRight() {
                Toast('调查问卷')
            },

            getSMSValidCodeHandler() {
                const checkMobile = validateMobile(this.form.mobile)
                if(checkMobile[0]) {
                    Toast(checkMobile[1])
                    return
                }

                this.canGetSMSValidCode = true
                this.codeText = '60s'

                let timeLast = 60
                let timer = setInterval(() => {
                    if (timeLast >= 0) {
                        this.codeText = timeLast + 's';
                        timeLast -= 1;
                    } else {
                        clearInterval(timer);
                        this.codeText = '获取验证码';
                        this.canGetSMSValidCode = false;
                    }
                }, 1000)

                getSMSValidCode({'openid': this.params.openid, 'mobile': this.form.mobile}).then((response) => {
                    if(response.data.status === 200) {
                        Toast('短信已发送')
                    } else {
                        Toast('短信发送失败')
                    }
                })
            },

            checkSMSValidCodeHandler() {
                const checkMobile = validateMobile(this.form.mobile)
                const checkSmsCode = validateNull(this.form.smsCode)
                if(checkMobile[0]) {
                    Toast(checkMobile[1])
                    return
                }
                if(checkSmsCode) {
                    Toast('验证码不能为空')
                    return
                }
                checkSMSValidCode({'openid': this.params.openid, 'smsCode': this.form.smsCode}).then(response => {
                    let self = this
                    if(response.data.status !== 200) {
                        Toast(response.data.msg)
                    } else {
                        bandingMobile({'openid': self.params.openid, 'mobile': self.form.mobile}).then(rs => {
                            if(rs.data.status !== 200) {
                                Toast(rs.data.data.msg)
                            } else {
                                setStore({'name': 'user', 'content': rs.data.data})
                                this.$router.push({path: '/user/index'})
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    
</style>